<template>
  <div>
    <div id="content">
      <p>呢称:<input type="text" placeholder="请输入呢称" v-model="name" /></p>
      <p>手机:<input type="text" placeholder="请输入手机" v-model="tel" /></p>
      <p>
        密码:<input type="password" placeholder="请输入密码" v-model="password" />
      </p>
      <input
        ref="login"
        class="input"
        @click="login"
        value="登录"
        type="submit"
        :disabled="disabled"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      name: "",
      password: "",
      tel: "",
      disabled: true,
    };
  },
  created() {},
  methods: {
    // 点击登陆
    login() {
      if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.tel)) {
        this.$loading.show("手机号格式不正确");
        setTimeout(() => {
          this.$loading.hide();
        }, 1000);
      }
      if (!/^\d{6}$/.test(this.password)) {
        console.log(44);

        this.$loading.show("密码格式不正确");
        setTimeout(() => {
          this.$loading.hide();
        }, 1000);
      } else {
           if (
        this.name != "" &&
        /^1[3|4|5|7|8][0-9]{9}$/.test(this.tel) &&
        /^\d{6}$/.test(this.password)
      ) {
        localStorage.setItem("user", this.name);
        this.$router.push("/About");

       

      } else {
        this.$loading.show("账号或者密码错误");
        setTimeout(() => {
          this.$loading.hide();
        }, 1000);
      }
      }
     
    },
  },
  watch: {
    nama() {
      if (this.tel && this.name && this.password) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    tel() {
      if (this.tel && this.name && this.password) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    password() {
      if (this.tel && this.name && this.password) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
  },
  //组件挂载
  components: {},
  //计算属性
  computed: {},
  //过滤器
  filters: {},
};
</script>

<style lang="scss" scoped>
#content {
  width: 100%;
  height: 140px;
  margin-top: 200px;
  text-align: center;
  .input[type="submit"] {
    width: 100px;
    margin-top: 20px;
    border: none;
    border-radius: 4px;
    height: 30px;
    background-color: green;
  }
  .input[disabled] {
    background-color: #ccc;
  }
}
</style>
